<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../libs/vue.js"></script>
  </head>
  <style>
    .static {
      width: 140px;
      height: 140px;
      margin: 20px;
      text-align: center;
      line-height: 140px;
      color: fff;
      font-size: 30px;
    }
    .a {
      background: darkcyan;
    }
    .b {
      border: 4px solid darkred;
    }
    .c {
      border-radius: 50%;
      box-shadow: 0 0 5px 0 #ccc;
    }
  </style>
  <body>
    <div id="app">
      <h2>{{title}}</h2>
      <div class="static a b c">1</div>
      <div class="static a b" :class="active">2</div>
      <div class="static a" :class="{b:isb}">3</div>
      <div class="static a" :class="[classb,'c']">4</div>
      <hr />
      <div class="static" style="background: red; border: 6px solid darkblue">
        5
      </div>
      <div class="static" :style="style">6</div>
      <div
        class="static"
        :style="{backgroundColor:'red',border:'5px solid pink',borderRadius:'50%'}"
      >
        7
      </div>
      <div class="static" :style="[obj1,obj2]">8</div>
    </div>
  </body>
  <script>
    const vm = new Vue({
      data: {
        title: "动态 class 和 style 绑定 ",
        active: "c",
        isb: true,
        classb: "b",
        classc: "c",
        style: {
          backgroundColor: "red",
          border: "6px solid gray",
          borderRadius: "50%",
        },
        obj1: {
          backgroundColor: "pink",
        },
        obj2: {
          border: "16px solid gray",
          borderRadius: "50%",
        },
      },

      mounted() {
        document.querySelectorAll("title")[0].innerHTML = this.title;
      },
    }).$mount("#app");
  </script>
</html>
